{extend name="$adminPage"}

{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">控制器controller</li>
        <li>视图view</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <pre class="layui-code controller-code">

class IndexController extends Controller {

    public function pk() {
        $builder = YT('demo', [
            "pk" => function(YunjTable $builder, $state){
                return "code";
            },
            "cols" => function (YunjTable $builder, $state) {
                return [
                    'code' => ['type' => 'checkbox'],
                    'name' => ['title' => '名称', 'templet' => 'dragSort'],
                    'attr' => ['title' => '属性'],
                    'action' => [
                        'title' => '操作',
                        'templet' => 'action',
                        'options' => [
                            'back_get_pk' => [
                                'title' => '后端获取选定数据的主键',
                                'type' => 'asyncEvent'
                            ],
                            'front_get_pk' => [
                                'title' => '前端获取选定数据的主键'
                            ],
                            'open_tab_page' => [
                                'title' => '携带主键值跳转到子页面',
                                'type' => 'openTab',
                                'url' => build_url('edit'),
                                'dropdown' => true
                            ],
                            'open_popup_page' => [
                                'title' => '携带主键值跳转到弹出层页面',
                                'type' => 'openPopup',
                                'url' => build_url('edit'),
                                'dropdown' => true
                            ]
                        ]
                    ],
                ];
            },
            "toolbar" => function (YunjTable $builder, $state) {
                return [
                    'back_get_pk' => [
                        'title' => '后端获取选定数据的主键',
                        'type' => 'asyncEvent'
                    ],
                    'front_get_pk' => [
                        'title' => '前端获取选定数据的主键'
                    ]
                ];
            },
            "defaultToolbar" => function (YunjTable $builder, $state) {
                return [
                    'filter', 'export',
                    'back_get_pk' => [
                        'title' => '后端获取选定数据的主键',
                        'class' => 'layui-icon-note',
                        'type' => 'asyncEvent'
                    ],
                    'front_get_pk' => [
                        'title' => '前端获取选定数据的主键',
                        'class' => 'layui-icon-note',
                    ]
                ];
            },
            "count" => function (YunjTable $builder, $filter) {
                return 3;
            },
            "items" => function (YunjTable $builder, $page, $pageSize, $filter, $sort) {
                return [
                    ['code' => 'aaa', 'name' => '产品1', 'attr' => '属性1'],
                    ['code' => 'bbb', 'name' => '产品2', 'attr' => '属性2'],
                    ['code' => 'ccc', 'name' => '产品3', 'attr' => '属性3'],
                ];
            },
            "event" => function (YunjTable $builder, $event, $codes) {
                switch ($event) {
                    case 'back_get_pk':
                        return response_json(10000, json_encode(['event' => $event, 'codes' => $codes]));
                    case TableBuilderEvent::SORT:
                        return success_json();
                }
                return error_json("演示数据不能进行操作");
            }
        ]);
        $builder->assign();
        return $this->view("table_demo/index/pk");
    }

}
            </pre>
        </div>
        <div class="layui-tab-item">
            <pre class="layui-code view-code">
{extend name="$adminPage"}

{block name="content"}
<table type="yunj" id="demo"></table>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['jquery', 'table'], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;
        let table = layui.table;

        // 前端获取选定数据的主键
        $(doc).bind(`yunj_table_demo_front_get_pk`, function (e,args){
            let codes = [];
            if(args.hasOwnProperty('data')){
                // 表头操作栏
                codes = [args.data.code];
            }else{
                // 表格操作栏
                codes = table.checkStatus(args.config.id).data.map(row => {
                    // row 数据行数据对象
                    return row.code;    // 当前数据行主键表头为code
                });
            }
            console.log('codes',codes);
            if(codes.length>0){
                yunj.alert(JSON.stringify({"codes":codes}));
            }else{
                yunj.error('请勾选数据行');
            }
        });
    });
</script>
{/block}
            </pre>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use('code', function () {
        layui.code({
            elem:'.controller-code',
            title:'控制器代码',
            encode: true,
            skin:'dark'
        });
        layui.code({
            elem:'.view-code',
            title:'视图代码',
            encode: true,
            skin:'dark'
        });
    });
</script>
{/block}